<template>
	<view class="content">
		<view class="formBox boxShadow">
			<view class="f-c-sb">
				<view class="label">优惠券类型：</view>
				<view class="value">{{detail.typeStr}}</view>
			</view>
			<view class="f-c-sb">
				<view class="label">优惠券名称：</view>
				<view class="value">{{detail.name}}</view>
			</view>
			<view class="f-c-sb">
				<view class="label">优惠券状态：</view>
				<view class="value">{{detail.statusStr}}</view>
			</view>
			<view class="f-c-sb">
        <view class="label">使用门店：</view>
        <view class="value" @click="this.show=true">{{ detail.useStoresStr }}</view>
      </view>
		</view>
		<view class="formBox"> 
			<view class="item  f-c-sa">
				<view style='flex:1'>
					<view class="itemTitle">总数</view>
					<view class="num">{{detail.sendTotal}}</view>
				</view>
				<view style='flex:1'>
					<view class="itemTitle">剩余库存</view>
					<view class="num">{{detail.sendReceive}}</view>
				</view>
				<view style='flex:1'>
					<view class="itemTitle">已领取</view>
					<view class="num">{{detail.receiveNum}}</view>
				</view>	
			</view>
			<view class="item  f-c-sa">
				<view style='flex:1'>
					<view class="itemTitle">已使用</view>
					<view class="num">{{detail.useNum}}</view>
				</view>
				<view style='flex:1'>
					<view class="itemTitle">已过期</view>
					<view class="num">{{detail.overdueNum}}</view>
				</view>
				<view style='flex:1'>
					<view class="itemTitle">使用率</view>
					<view class="num">{{detail.utilization}}</view>
				</view>
			</view>
		</view>
		<view class="formBox">
			<view style='padding:10rpx'>
				<u-tabs font-size='24' :is-scroll="false" :list="list" :current="current" @change="sectionChange"></u-tabs>
			</view>
			<view style='padding:20rpx'>
				<u-search shape='square'  @search="search" placeholder="请输入手机号" v-model="shopList[current].listQuery.param" :show-action='false'></u-search>
			</view>
		
			<scroll-view scroll-x scroll-y  @scrolltolower='scrolltolower'>
				
				<uni-table border stripe emptyText="暂无更多数据" :loading='loading' >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th v-for="(item,index) in tableTh" :key='index' align="center">{{item}}</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr class="u-tr" v-for="(item,index) in shopList[current].list" :key="index">
						<uni-td  class="u-td">
							<u-image class='img' :src="item.wxUrl" width='60rpx' height="60rpx"></u-image>
						</uni-td>
						<uni-td class="u-td">{{item.wxName}}</uni-td>
						<uni-td class="u-td">{{item.customerProperty}}</uni-td>
						<uni-td class="u-td u-phone">{{item.phone}}</uni-td>
						<uni-td class="u-td u-time">{{item.createTime}}</uni-td>
						<uni-td class="u-td" v-if='current==1'>{{item.storeName}}</uni-td>
						<uni-td class="u-td" v-if='current==1'>{{item.writeOffTime}}</uni-td>
						<uni-td class="u-td" v-if='current==1'>{{item.writeOffUser}}</uni-td>
				
					</uni-tr>
				</uni-table>
			</scroll-view>
		</view>
		<u-popup mode="bottom" v-model="show" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">
					<u-empty v-if="!selectList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
					<view class="item boxShadow" v-for="(item, index) in selectList" :key="item.storeId">
						<view class="f-c-fs">
							<view class="color color1" :class="'color' + item.storeType">{{ item.storeTypeStr }}</view>
						</view>
						<view class="item-title f-c-sb">
							<view>{{ item.storeName }}</view>
							<!-- <u-checkbox @change="checkboxChange1(index, item.checkbox, item.storeId)" v-model="item.checkbox"></u-checkbox> -->
						</view>
						<view class="info">{{ item.address }}</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>
<script>
import {couponData, couponDataList} from '@/api/marketing'
import {showStoreList} from '@/api/index'

export default {
  data() {
    return {
      show: false,
      selectList: [],
      list: [
        {
          name: '领取客户'
        },
        {
          name: '已使用客户'
					}
				],
				current: 0,
				phone:'',
				loading:false,
				couponId:'',
				detail:{},
				shopList:[
					{
						listQuery:{
							pageNo: 1,
							pageSize: 20,
							noData: true,
							param:''
						},
						list:[]
					},
					{
						listQuery:{
							pageNo: 1,
							pageSize: 20,
							noData: true,
							param:''
						},
						list:[]
					}
				]
				
			};
		},
		filters:{
			 formatSeconds(value) { 
			 var theTime = parseInt(value/1000);// 需要转换的时间秒 
			 var theTime1 = 0;// 分 
			 var theTime2 = 0;// 小时 
			 var theTime3 = 0;// 天
			 if(theTime > 60) { 
			  theTime1 = parseInt(theTime/60); 
			  theTime = parseInt(theTime%60); 
			  if(theTime1 > 60) { 
			   theTime2 = parseInt(theTime1/60); 
			   theTime1 = parseInt(theTime1%60); 
			   if(theTime2 > 24){
			    //大于24小时
			    theTime3 = parseInt(theTime2/24);
			    theTime2 = parseInt(theTime2%24);
			   }
			  } 
			 } 
			 var result = '';
			 if(theTime > 0){
			  result = ""+parseInt(theTime)+"秒";
			 }
			 if(theTime1 > 0) { 
			  result = ""+parseInt(theTime1)+"分"+result; 
			 } 
			 if(theTime2 > 0) { 
			  result = ""+parseInt(theTime2)+"小时"+result; 
			 } 
			 if(theTime3 > 0) { 
			  result = ""+parseInt(theTime3)+"天"+result; 
			 }
			 return result; 
			}
		},
		computed:{
			tableTh(){
				return this.current == 0 ? ['微信头像','昵称/姓名','客户性质','手机号','领取时间']:['微信头像','昵称/姓名','客户性质','手机号','领取时间','核销门店','核销时间','核销人员']
			}
		},
		onLoad(option) {
			this.couponId=JSON.parse(option.param).id
			
			this.couponDataFn()
			this.couponDataListFn()
		},
		methods:{
			lookStore() {
				showStoreList({storeId:this.detail.useStores}).then(res=>{
					res.data.forEach((val,index)=>{
						res.data[index].checkbox=true
					})
					
					this.selectList=res.data
				})
			},
			search(){
				this.shopList[this.current].listQuery.noData=true
				this.shopList[this.current].listQuery.pageNo=1
				this.couponDataListFn()
			},
			setPhone(e){
				this.phone = this.phone.replace(/[^\d]/g,'')
			},
			sectionChange(e){
				this.current = e;
				if(this.shopList[this.current].listQuery.noData&&this.shopList[this.current].listQuery.pageNo==1){
					this.couponDataListFn()
				}
			},
			scrolltolower(e){
				if(this.shopList[this.current].listQuery.noData){
					this.loading = true
					this.couponDataListFn()
				}
				
			},
			couponDataFn(){
				couponData({id:this.couponId}).then(res=>{
					this.detail=res.data
					this.lookStore()
				})
			},
			couponDataListFn(){
				
				var data={
					...this.shopList[this.current].listQuery,
					id:this.couponId,
					useType:+this.current+1
				}
				console.log(data);
				couponDataList(data).then(res=>{
					
					this.loading=false
					if (this.shopList[this.current].listQuery.pageNo == 1) {
						this.shopList[this.current].list = res.data;
					} else {
						this.shopList[this.current].list = this.shopList[this.current].list.concat(res.data);
					}
					this.shopList[this.current].listQuery.pageNo += 1;
					
					if (this.shopList[this.current].listQuery.pageSize!= res.data.length) {
						this.shopList[this.current].listQuery.noData = false;
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		padding-top: 20rpx;
	}
.formBox{
	padding: 20rpx;
	.label{
		font-size: 28rpx;
		font-weight: 500;
		color: #666;
		line-height: 72rpx;
	}
	.value{
		font-size: 28rpx;
		font-weight: 500;
		color: #131313;
		line-height: 72rpx;
	}
	.item{
		>view{
			border-right:1px solid  #CCC;
		}
		>view:last-child{
			border-right:none;
		}
		text-align: center;
		margin: 25rpx 0;
		.line{
			width: 2rpx;
			height: 74rpx;
			background-color: #dfdfdf;
		}
		.itemTitle{
			font-size:26rpx;
			font-weight: 500;
			text-align: center;
			color: #131313;
			line-height: 36rpx;
			padding: 0 25rpx;
		}
		.num{
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			color: #ff6738;
			line-height: 36rpx;
		}
	}
	.table{
		height: 500rpx;
		display: table!important;
	}
	.u-tr{
		display: table-row!important;
	}
	.u-td{
		white-space: nowrap;
		font-size: 22rpx;
		width: 100%;
		display: table-cell!important;
		.img{
			margin: 0 auto;
		}
	}
	
	
	
}
.list {
	width: 100%;
	.item {
		width: 660rpx;
		height: 231rpx;
		background: #ffffff;
		border-radius: 18rpx;
		margin: 23rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
		.color {
			width: 110rpx;
			height: 36rpx;
			opacity: 1;
			background: #177fff;
			border-radius: 6rpx;
			font-size: 24rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 36rpx;
			margin-right: 18rpx;
			&.color1 {
				background: #177fff;
			}
			&.color2 {
				background: #ff6738;
			}
			&.color3 {
				background: #f54170;
			}
			&.color4 {
				background: #2db2ad;
			}
		}
	}
	.item-title {
		font-size: 28rpx;
		font-weight: 700;
		color: #131313;
		margin: 20rpx 0;
	}
	.info {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		line-height: 36rpx;
	}
}
	.formBox .label{
			min-width: 120rpx; 
	}
</style>
